<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="./topui1.0.css?1.0"/>
		<link rel="stylesheet" type="text/css" href="//xn--kwrr8v.top/admin/css/zxt.css"/>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div class="top backg1">
			<!--<img class="logo" src="../image/logo.png" alt="logo">-->
			<h1 class="title color0">TopUI | 极简原生CSS库</h1>
		</div>
		<div class="main">
			<div class="main-left df">
				<button class="b00f cfff">按钮1</button>
				<button class="bf00 cfff">按钮2</button>
				<button class="b00a cfff">按钮3</button>
				<button class="b0f0 cfff">按钮5</button>
				<button class="b800 cfff">按钮6</button>
				<button class="b888 cfff">按钮7</button>
			</div>
			<div class="main-right">
				<h1>一级标题</h1>
				<h2>二级标题</h2>
				<h3>三级标题</h3>
				<h4>四级标题</h4>
				<h5>五级标题</h5>
				<p>段落</p>
				<tt>等宽字体</tt>
				<form action="/" method="post">
				<li><label>用户名</label> <input type="text" placeholder="用户名"/></li>
				<li><label>密  码</label> <input type="password" placeholder="密码"/></li>
				<li><label>确认密码</label> <input type="password" placeholder="确认密码"/></li>
				<input type="submit" class="submit b00f cfff" value="提交"/>
				</form>				
				<div class="code">
					<div class="code-title">
						<li class="bf00"> </li>
						<li class="b0f0"> </li>
						<li class="b00f"> </li>
					</div>
					<div class="code-copy">
						<button class="backg1 color0">copy</button>
					</div>
					<div class="code-main">
						<div class="code-left-num">
							<li>1</li>
							<li>2</li>
							<li>3</li>
							<li>4</li>
							<li>5</li>
							<li>6</li>
							<li>7</li>
							<li>8</li>
							<li>9</li>
							<li>10</li>
							<li>11</li>
							<li>12</li>
							<li>13</li>
							<li>14</li>
							<li>15</li>
							<li>16</li>
						</div>
						<div class="code-code">
						<pre>
#include <stdio.h>
// 定义结构体类型
struct Student {
	char name[20];
	int age;
	float score;
};
int main() {
	// 初始化结构体变量
	struct Student stu1 = {"Alice", 20, 90.5};
	// 访问结构体成员
	printf("Name: %s ", stu1.name);
	printf("Age: %d ", stu1.age);
	printf("Score: %.1f ", stu1.score);
	return 0;
}
</pre>
						</div>
					</div>
				</div>
    				<div style="position: absolute;margin: 500px; left: -350px;">
        				<div id="zxt">
        			        <div id="zxt-x">
            		            <li>10000 -</li>
                        		<li>80000 -</li>
                        		<li>60000 -</li>
                        		<li>40000 -</li>
                        		<li>20000 -</li>
                        	</div>
                        	<div id="zxt-y">
                        		<div id="y-top">
                        		    <div><li style="height: 83%;" id="zx3">8312</li></div>
                        		    <div><li style="height: 42%;" id="zx4">4200</li></div>
                        		    <div><li style="height: 62%;" id="zx6">6254</li></div>
                        		    <div><li style="height: 54%;" id="zx7">5452</li></div>
                        		    <div><li style="height: 64%;" id="zx6">6427</li></div>
                        		    <div><li style="height: 52%;" id="zx7">5220</li></div>
                        		    <div><li style="height: 58%;" id="zx6">5810</li></div>
                        		    <div><li style="height: 88%;" id="zx3">8852</li></div>
                        		    <div><li style="height: 62%;" id="zx1">6220</li></div>
                        		    <div><li style="height: 54%;" id="zx6">5456</li></div>
            			        </div>
        			        <div id="y-bottom">
        			            <li>03-26</li>
        			            <li>03-27</li>
        			            <li>03-28</li>
        			            <li>03-29</li>
        			            <li>03-30</li>
        			            <li>03-31</li>
        			            <li>04-01</li>
        			            <li>04-02</li>
        			            <li>04-03</li>
        			            <li>04-04</li>				
        			        </div>
        			    </div>
        			</div>
        		</div>
    		</div>
		</div>
		<!--<div class="bottom">-->
		<!--	<div class="bottom-nav">-->
		<!--		<li><a href="">关于我们</a></li>-->
		<!--		<li><a href="">建议留言</a></li>-->
		<!--		<li><a href="">开发平台</a></li>-->
		<!--		<li><a href="">站点历程</a></li>-->
		<!--		<li><a href="">后台管理</a></li>-->
		<!--		<li><a href="">商业合作</a></li>-->
		<!--		<li><a href="">资助我们</a></li>-->
		<!--	</div>-->
		<!--	<div class="bottom-miit">-->
		<!--		<a href="https://beian.miit.gov.cn/" target="_blank">ICP备案编号 - 湘ICP备2022007847号</a>-->
		<!--		<br>Copyright © 2019-2025 彪哥.top. All rights reserved. -->
		<!--	</div>-->
		<!--</div>-->
		<div class="pop">
			<div class="pop-hint">
				<div class="pop-hint-title">
					<li>提示</li>
					<li class="pop-hint-x">x</li>
				</div>
				<p class="pop-hint-p">
					欢迎来到 topUI V1.0官网，极简CSS组件UI库！预计完成后，免费开源。
					初来乍到请多多关照！（本UI由彪哥.TOP提供开发技术支持于云服务）
				</p>
				<button class="pop-hint-but b00f cfff">知道了</button>
			</div>
		</div>
		<div class="call">
			<tt>禁止弹窗提醒！</tt>
		</div>
	</body>
	<script type="text/javascript">
		var clickableElements = document.getElementsByClassName('pop');
		for (var i = 0; i < clickableElements.length; i++) {
		  clickableElements[i].addEventListener('click', function() {
		    this.style.display = 'none';
		  });
		}
		var clickableElements = document.getElementsByClassName('call');
		for (var i = 0; i < clickableElements.length; i++) {
		  clickableElements[i].addEventListener('click', function() {
		    this.style.display = 'none';
		  });
		}
	</script>
</html>